<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>login</title>
	<link rel="stylesheet" type="text/css" href="../../css/index.css" />
	<style media="screen">
		html,
		body {
			background: #FFFFFF;
		}

		input::-webkit-input-placeholder {
			color: #BBBBBB;
			font-size: 14px;
		}

		input::-moz-placeholder {
			color: #BBBBBB;
			font-size: 14px;
		}

		.info-box {
			padding: 30px 15px;
			box-sizing: border-box;
			width: 100%;
			flex-direction: column;
		}

		.title {
			font-size: 30px;
			padding: 20px 0 40px 0;
			box-sizing: border-box;
			flex-shrink: 0;
			font-weight: bold;
			margin-left: 10px;
			margin-right: 10px;
		}

		.info-one {
			height: 50px;
			align-items: center;
			margin-bottom: 10px;
			margin-left: 10px;
			margin-right: 10px;
		}

		.info-one .input-box {
			overflow: hidden;
		}

		.info-one input {
			padding: 10px;
			box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
		}

		.info-one .code {
			width: auto;
			height: 28px;
			background: #ffffff;
			text-align: center;
			line-height: 28px;
			font-size: 12px;
			color: #FF9502;
			flex-shrink: 0;
		}

		.info-one .lf {
			line-height: 50px;
			flex-shrink: 0;
		}

		.login-btn {
			width: 100%;
			height: 45px;
			flex-shrink: 0;
			background: #FF9502;
			opacity: 0.5;
			border-radius: 4px;
			text-align: center;
			line-height: 45px;
			color: #FFFFFF;
			font-size: 18px;
			margin-top: 30px;
		}

		.login-btn.on {
			background: #FF9502;
			opacity: 1;
		}

		/*区号样式*/
		.option {
			width: 40px;
			position: relative;
		}

		.option select {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
		}

		.option:after {
			content: "";
			width: 7px;
			height: 5px;
			background: url(../../image/login/down.png) no-repeat center;
			background-size: 7px 5px;
			position: absolute;
			right: 4px;
			top: 44%;
			pointer-events: none;
		}

		/*协议*/
		.xieyi {
			font-size: 13px;
			color: #999999;
			line-height: 30px;
			padding: 20px 0;
			box-sizing: border-box;
			align-items: center;
			justify-content: center;
		}

		.xieyi .sel-box {
			width: 16px;
			height: 16px;
			background: url(../../image/login/sel_0.png) no-repeat left center;
			background-size: 16px;
			margin-right: 10px;
		}

		.xieyi .sel-box.on {
			background: url(../../image/login/sel_1.png) no-repeat left center;
			background-size: 16px;
		}

		.xieyi span {
			color: #333333;
		}

		/*其他登录方式*/
		.other-login {
			width: 100%;
			background: #FFFFFF;
			box-sizing: border-box;
			flex-shrink: 0;
		}

		.other-login .other-title {
			text-align: center;
			height: 30px;
			margin: 0 90px;
		}

		.other-login .other-title span {
			background: #FFFFFF;
			padding: 0 10px;
			position: relative;
			top: -10px;
			font-size: 14px;
			color: #CCCCCC;
		}

		.other-login .other-box {
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
		}

		.other-login .other-box .icon {
			height: 60px;
			align-items: center;
			justify-content: center;
		}

		.other-login .other-box .icon img {
			width: 44px;
			height: 44px;
			border-radius: 22px;
			display: block;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div id="vue">
		<div class="info-box flex inputarea">
			<div class="title">HI！<br>欢迎来到天宏沐晨</div>
			<div class="info-one flex border-bottom">
				<div class="lf">手机号</div>
				<div class="input-box flex1">
					<input type="tel" maxlength="11" oninput="inputFunction(this)" name="phone" placeholder="输入手机号">
				</div>
			</div>
			<div class="info-one flex border-bottom">
				<div class="lf">验证码</div>
				<div class="input-box flex1">
					<input type="tel" maxlength="6" oninput="inputFunction(this)" name="code" placeholder="请输入您的验证码">
				</div>
				<div class="code getcode" tapmode onclick="getCodeClick(this)">获取验证码</div>
			</div>
			<!--登录按钮-->
			<div class="login-btn repeatbtn" tapmode onclick="loginClick()">登录</div>
			<!--同意协议-->
			<div class="xieyi flex">
				<div :class="['sel-box flex',seLxy ? 'on' : '']" tapmode onclick="seLxieyi(this)"></div>
				同意<span data-url="main3/fuwenben.html" data-type="Page/xieyi" data-title="平台用户使用协议" tapmode
					onclick="open_page(this)">《用户协议》</span>
				和<span data-url="main3/fuwenben.html" data-type="Page/yinsi" data-title="平台用户隐私协议" tapmode
					onclick="open_page(this)">《隐私协议》</span>
			</div>

			<!--其他登录方式-->
			<div class="flex1"></div>
		</div>
		<div class="other-login" id="app-footer">
			<div class="other-title border-top"><span class="text">第三方登录</span></div>
			<div class="other-box flex">
				<div class="icon flex flex1"  tapmode onclick="fnApAuth();" ><img
					src="../../image/login/type_2.png" /></div>

				<div class="icon flex flex1" v-if="wxIS" tapmode onclick="fnWxAuth();"><img src="../../image/login/type_1.png" />
				</div>

				<div class="icon flex flex1" v-if="qqIS" tapmode onclick="fnQqAuth();"><img src="../../image/login/type_0.png" />
				</div>
			
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/h-tool"></script>
<script type="text/javascript">
	lanYun.setFooter('app-footer');
	define(function (require, exports, module) {

		var type = api.systemType;
		var sysver = api.systemVersion;
		var sysfver = sysver.split(".")[0];
	
		lanYun.newVue('#vue', {
			logintit: '登录',
			seLxy: 1,
			type: type,
			banben: sysfver,
			postdata: {},
			wxIS: false,
			qqIS:false,
		}, function (e) {

		});

		setHeith = function () {
			var frmH = api.frameHeight;
			$('.info-box').css('height', (frmH - 100) + "px");
		};
		setHeith();

		isWX = function () {
			var wxPlus = api.require('wxPlus');
			wxPlus.isInstalled(function (ret, err) {
				if (ret.installed) {
					console.log("当前设备已安装微信客户端");
					lanYun.vue.wxIS = true
				} else {
					console.log('当前设备未安装微信客户端');
					lanYun.vue.wxIS = false
				}
			});
		};

		isWX();


		//同意协议
		seLxieyi = function () {
			var seLxy = lanYun.vue.seLxy;
			lanYun.vue.seLxy = seLxy ? 0 : 1;
		}
		//打开用户服务协议
		openXieYiPage = function () {
			lanYun.openWin('main0/fuwenben.html', {
				title: "用户服务协议"
			});
		};

		//登录
		loginClick = function () {
			var pdata = {};
			pdata.phone = $('input[name="phone"]').val();
			pdata.code = $('input[name="code"]').val();
			if (!TOOL.check.isMobile(pdata.phone)) {
				lanYun.toast('请输入正确的手机号');
				return;
			}
			if (!pdata.code) {
				lanYun.toast('请输入短信验证码');
				return;
			}
			if (!lanYun.vue.seLxy) {
				lanYun.toast('请阅读用户服务协议');
				return;
			}
			lanYun.post('UserLogin/logincode', pdata, function (ret) {
				//console.log(JSON.stringify(ret));
				if (ret.errcode == 0) {
					lanYun.rmStorage('wait');
					lanYun.toast(ret.msg);
					lanYun.loginOk(ret.data);
					if (ret.isnew == 1) {
						lanYun.openWin('login/yq_code.html', {
							win: 'win',
							border: '1',
							menu: '跳过',
							frameParam: {},
						});
					}
					setTimeout(function () {
						api.closeWin();
					}, 300)
				} else if (ret.errcode == 2) {
					lanYun.alert({ fname: 'diaLogBox1', title: '提示', button: ['确定'], content: ret.msg }, function (ret) {
						api.closeWin();
					});
				} else {
					lanYun.toast(ret.msg);
				}
			}, 2);
		};

		//获取验证码
		getCodeClick = function (tis) {
			if ($(tis).hasClass('on')) {
				return;
			}
			var pm = { type: 'login' };
			pm.phone = $('input[name="phone"]').val();
			if (!TOOL.check.isMobile(pm.phone)) {
				lanYun.toast('请输入正确的手机号');
				return;
			}
			lanYun.post('send/getcode', pm, function (ret) {
				if (ret.errcode == 0) {
					lanYun.toast(ret.msg);
					lanYun.setWait(tis);
				} else if (ret.errcode == 2) {
					lanYun.alert({ fname: 'diaLogBox1', title: '提示', button: ['确定'], content: ret.msg }, function (ret) {
						api.closeWin();
					});
				} else {
					lanYun.toast(ret.msg);
				}
			}, 2);
		};

		//输入事件
		inputFunction = function (e) {
			e.value ? $(e).parent().addClass('on') : $(e).parent().removeClass('on');
			lanYun.vue.postdata[e.name] = e.value;
			if ($('.inputarea').find('.input-box.on').length >= 2) {
				$('.repeatbtn').addClass('on');
			} else {
				$('.repeatbtn').removeClass('on');
			}
		}

		//打开协议
		open_page = function (tis) {
			var dst = tis.dataset;
			lanYun.openWin(dst.url, {
				win: 'win',
				title: dst.title,
				frameParam: dst
			});
		}

		//微信快捷登录
		fnWxAuth = function () {
			var wxPlus = api.require('wxPlus');
			lanYun.showProgress({ type: 2 });
			//lanYun.showProgress();
			wxPlus.isInstalled(function (ret, err) {
				if (ret.installed) {
					wxPlus.auth({}, function (ret1, err1) {
						lanYun.hideProgress();
						if (ret1.status && ret1.code) {
							wxPlus.getToken({ code: ret1.code }, function (ret2, err2) {
								if (ret2.status) {
									wxPlus.getUserInfo({ accessToken: ret2.accessToken, openId: ret2.openId }, function (ret3, err3) {
										if (ret3.status) {
											ret3.oauth = "wxapp";
											oauth_login(ret3);
										} else {
											lanYun.toast('登录失败');
										}
									});
								} else {
									lanYun.toast('登录失败');
								}
							});
						} else {
							switch (err1.code) {
								case 1:
									lanYun.toast('登录授权失败');
									break;
								case 2:
									lanYun.toast('登录授权失败');
									break;
								case 3:
									// lanYun.toast('当前设备未安装微信客户端');
									break;
							}
						}
					});
				} else {
					// lanYun.toast('当前设备未安装微信客户端');
				}
				if (err) {
					lanYun.hideProgress();
				}
			});
		}

		//QQ快捷登录
		fnQqAuth = function () {
			var qq = api.require('QQPlus');
			lanYun.showProgress({ type: 2 });
			qq.installed({}, function (ret, err) {
				lanYun.hideProgress();
				if (ret.status) {
					qq.login({}, function (ret1, err1) {
						lanYun.hideProgress();
						if (ret1.status) {
							var cont = ret1;
							qq.getUserInfo({}, function (ret3, err3) {
								if (ret3.status) {
									var userInfo = {};
									if (lanYun.vue.type == "ios") {
										//console.log("ios");
										var data = ret3.info;
									} else {
										//console.log("and");
										var data = JSON.parse(ret3.info)
									}
									userInfo.headimgurl = data.figureurl_qq;
									userInfo.nickname = data.nickname;
									userInfo.sex = data.gender;
									userInfo.openid = cont.openId;
									userInfo.city = data.city;
									userInfo.province = data.province;
									userInfo.country = "";
									userInfo.oauth = "qq";
									oauth_login(userInfo);
								} else {
									lanYun.toast('登录失败');
								}
							});
						} else {
							lanYun.toast('登录失败');
						}
					});
				} else {
					// lanYun.toast('当前设备未安装QQ客户端');
				}
				if (err) {
					lanYun.hideProgress();
				}
			});
		}

		//苹果登录
		fnApAuth = function () {
			var Apple = api.require('Apple');
			lanYun.showProgress({ type: 2 });
			Apple.login(function (ret, err) {
				lanYun.hideProgress();
				if (ret.status) {
					var userInfo = {};
					userInfo.openid = ret.authInfo.user;
					userInfo.oauth = "ios";
					oauth_login(userInfo);
				} else {
					lanYun.hideProgress();
					if (err.code == 1001) {
						lanYun.toast('取消登录');
					} else {
						lanYun.toast('登录失败');
					}
				}
			});
		}

		// 登录回调
		oauth_login = function (oauth) {
			//console.log(JSON.stringify(oauth));
			lanYun.post('UserAuto/wxauto', oauth, function (ret) {
				//console.log(JSON.stringify(ret));
				if (ret.errcode == 0) {
					lanYun.rmStorage('wait');
					//lanYun.loginOk(ret.data);
					if (ret.needband == 1) {
						lanYun.openWin('login/band_phone.html', {
							title: '',
							border: '1',
							frameParam: ret.data,
						});
					} else {
						lanYun.loginOk(ret.data);
						api.closeToWin({ name: 'root' });
					}
				} else if (ret.errcode == 2) {
					lanYun.alert({ fname: 'diaLogBox1', title: '提示', button: ['确定'], content: ret.msg }, function (ret) {
						api.closeWin();
					});
				} else {
					lanYun.toast(ret.msg);
				}
			}, 2);
		}

	});

</script>

</html>